<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div>
      <div class="payBox">
        <div class="payMain">
          <!-- <div class="payTop">收藏到书包</div> -->
          <div class="way">
            <div>
              <textarea
                v-model="textValue"
                rows="1"
                cols="2"
                value="300"
              ></textarea>
              <div class="wordMsg">
                <div>
                  <div>{{ time }}</div>
                  <van-rate v-model="num" />
                </div>
                <div>{{ wordNum }}/300</div>
              </div>
            </div>
            <div><button @click="send()">发送</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      nowIndex: 0,
      commentItem: "",
      payList: [
        {
          coupon: 100,
          price: 10,
        },
        {
          coupon: 200,
          price: 20,
        },
        {
          coupon: 500,
          price: 50,
        },
      ],
      time: "", // 评论时间
      textValue: "", // 评论内容
      num: 0,
    };
  },
  computed: {
    wordNum() {
      // console.log(this.textValue);
      return this.textValue.length;
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(new Date());
    this.timeData();
  },
  // Vue方法定义
  methods: {
    timeData() {
      let date = new Date();
      let year = date.getFullYear(); //获取当前年
      let month = date.getMonth() + 1; //获取当前月 默认0-11
      let day = date.getDate(); //获取当前日
      this.time += year + "年" + month + "月" + day + "日";
    },
    payClose() {
      this.$store.commit("bags/componentPath", "pay");
    },
    btnClick() {
      this.$store.commit("bags/componentPath", "pay");
      // this.
      // console.log(this.payList[this.nowIndex].coupon);
      this.$store.dispatch("bags/payMoney", {
        userid: this.$store.state.login.loginuser.userid,
        money: +this.payList[this.nowIndex].coupon,
      });
      this.$store.dispatch("login/getUser", {
        userid: this.$store.state.login.loginuser.userid,
      });
    },
    liClick(index) {
      this.nowIndex = index;
    },
    greyClick() {
      // this.$parent.back();
      this.$emit("closeAlert");
      // this.$parent.closeAlert()
    },
    send() {
      if (this.textValue === "") {
        console.log("评论不能为空");
      } else {
        // console.log(this.textValue);
        // console.log(this.num);
        this.$parent.greyClick();
        this.$store.dispatch("bags/addEvaluation", {
          userid: sessionStorage.getItem("userId"),
          bookid: this.$store.state.bags.bookItem.bookid,
          time: this.time,
          evaluationnum: this.num * 2,
          context: this.textValue,
        });
        this.$store
          .dispatch("bags/getEvaluation", {
            type: "book",
            bookid: this.$store.state.bags.bookItem.bookid,
          })
          .then((res) => {
            console.log(res.info, "getEvaluation");
            // this.$store.state.bags.commentData.forEach((item1, index1) => {
            //   this.$store.state.bags.goodData.forEach((item, index) => {
            //     if (
            //       item1.userid === item.userid &&
            //       item1.evaluationid === item.evaluationid
            //     ) {
            //       console.log("yiyangid");
            //       this.$refs.likeList[index1].style.color = "red";
            //     } else {
            //       this.$refs.likeList[index1].style.color = "block";
            //     }
            //   });
            // });
            this.$parent.forList();
          });
      }
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* 弹窗 */
.payBox {
  position: fixed;
  left: 0;
  background-color: white;
  width: 100vw;
  padding: 0px 0 20px;
  font-family: PingFangSC-regular;
  bottom: 0;
}
.payTop {
  line-height: 50px;
  font-size: 17px;
  font-family: PingFangSC-regular;
  position: relative;
  /* padding-left: 20px; */
}
.payMain {
  padding: 15px 15px 0;
}
.payTop > span:nth-child(1) {
  transform: rotate(45deg);
  color: #666666;
  font-size: 20px;
  display: inline-block;
}
.payTop > span:nth-child(2) {
  margin-left: -0.906667rem;
  width: 68px;
  position: absolute;
  left: 50%;
}

.way {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.way {
  display: flex;
  background-color: #eee;
  padding: 3px 10px;
}
.way > div:nth-child(1) {
  border-right: 2px dashed rgb(207, 207, 207);
}
.way > div:nth-child(1) textarea {
  width: 250px;
  padding-right: 15px;
  height: 100px;
  border: none;
  padding-top: 10px;

  background-color: #eee;
}
.way > div:nth-child(2) button {
  width: 70px;
  height: 30px;
  border: none;
  outline: none;
  margin-top: 87px;
  margin-left: 5px;
  /* border:none; */
  border-radius: 25px;
  background-color: rgb(252, 209, 69);
  color: white;
}
.explain {
  margin-top: 20px;
  color: #868686;
  line-height: 27px;
  font-size: 13px;
}
.payBtn {
  margin-top: 21px;
  border-top: 2px solid #f9f9f9;
  padding-top: 9px;
  text-align: center;
}
.payBtn > button {
  width: 345px;
  line-height: 43px;
  border-radius: 30px;
  border: none;
  outline: none;
  background-color: #f09d11;
  color: white;
  font-size: 15px;
  font-family: PingFangSC-regular;
  /* margin:0 auto; */
}
.wordMsg {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
}
.wordMsg > div:nth-child(2) {
  margin-top: 18px;
}
</style>